<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>v-html内置指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>
    <!-- 
        v-html指令：
            1、作用：向指定节点中渲染包含html结构的内容
            2、与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xxx}}则不会。
                (2).v-html可以识别html结构
            3、严重注意：v-html有安全性问题！！！
                (1).在网站上动态渲染任何HTML是非常危险的，容易导致XSS攻击。  
                (2).一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！
     -->
    <!--准备好一个容器-->
    <div id="root">
        <div>{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。

    new Vue({
        el:'#root',
        data:{
            name:'南风',
            str:'<h3>你好啊~<h3/>',
            str2:'<a href="javascript:alert(1)">兄弟我找到你想要的资源了 你好啊~ <a/>',
        }
    })

</script>
</html>
